const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const filter = require('gulp-filter');
const babel = require('gulp-babel');
const plumber = require('gulp-plumber');
const fileinclude = require('gulp-file-include');
const browserSync = require('browser-sync').create();
const reload = browserSync.reload;

// 配置参数
const CONFIG = require('./config')


// dev
gulp.task('dev', ['sass', 'es6', 'file'], function () {
    // 开启本地服务
    browserSync.init({
        server: {
            directory: true,
            baseDir: [`${CONFIG.SRC_PATH}/pages/`, `${CONFIG.SRC_PATH}`] // 页面路径
        },
        startPath: `/${CONFIG.INDEX_PAGE}`, // 初始打开页面
        port: `${CONFIG.DEV_PORT}` || 3001,
        online: false,
        timestamps: true,
        logLevel: `${CONFIG.DEBUG ? 'debug' : 'info'}`
    });

    gulp.watch(`${CONFIG.SRC_PATH}/_scss/**/*.scss`, ['sass']);
    gulp.watch(`${CONFIG.SRC_PATH}/_es6/**/*.js`, ['es6']);
    gulp.watch(`${CONFIG.SRC_PATH}/_pages/**/*.html`, ['file']);
    gulp.watch(`${CONFIG.SRC_PATH}/pages/*.html`).on('change', reload);
})


//  SASS 转换成 CSS
gulp.task('sass', function (event) {
    /**
     * 展开输出方式 expanded
     * 紧凑输出方式 compact
     * 压缩一行输出方式 compressed
     */
    return gulp.src(`${CONFIG.SRC_PATH}/_scss/*.scss`)
        .pipe(plumber())
        // 自动处理浏览器前缀
        .pipe(autoprefixer({
            browsers: ['> 1%', 'last 2 versions', 'Firefox ESR'],
            cascade: false,
        }))
        .pipe(sass({outputStyle: 'compact'}).on('error', sass.logError))
        .pipe(plumber.stop())
        .pipe(gulp.dest(`${CONFIG.SRC_PATH}/css/`))
        .pipe(filter('**/*.css'))
        .pipe(reload({stream: true}));
});

//  ES6 转换成 ES5
gulp.task('es6', function () {
    return gulp.src(`${CONFIG.SRC_PATH}/_es6/**/*.js`)// ES6 源码存放的路径
        .pipe(babel())
        .pipe(gulp.dest(`${CONFIG.SRC_PATH}/js/`)) //转换成 ES5 存放的路径
        .pipe(reload({stream: true}))
});

// file 页面文件引用合并
gulp.task('file', function () {
    // 适配_pages中所有文件夹下的所有html
    gulp.src([`${CONFIG.SRC_PATH}/_pages/**/*.html`, `!${CONFIG.SRC_PATH}/_pages/_include/**/*`])
        .pipe(fileinclude({
            prefix: '@@',
            basepath: '@file'
        }))
        .pipe(gulp.dest(`${CONFIG.SRC_PATH}/pages/`))
        .pipe(reload({stream: true}));
})

// 发布
gulp.task('build', ['sass', 'es6', 'file'], function () {
    return gulp.src([`${CONFIG.SRC_PATH}/**/*`, `!${CONFIG.SRC_PATH}/_*`, `!${CONFIG.SRC_PATH}/_*/**/*`])
        .pipe(gulp.dest(`${CONFIG.BUILD_PATH}`))
});

